<template>
	<view v-if="info">
		<view class="goods-info">
			<view class="u-flex item" @click="jump(`/pages/course/course?id=${info.courseId}`)">
				<image class="goods-img" :src="info.courseCover"></image>
				<view class="u-flex-1">
					<view class="title u-line-2">{{info.courseName}}</view>
					<view class="sku"></view>
					<view class="price u-flex">
						<image src="/static/icon2/ib.png"></image>
						<text>{{info.totalMoney}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="order-info">
			<view class="title">订单信息</view>
			<view class="line">订单编号：{{info.outTradeNo}}</view>
			<view class="line">订单时间：{{info.createTime}}</view>
		</view>
		
		<view class="co-list">
			<view class="co-title">已购章节</view>
			<view class="item" v-for="(item,index) in chapter" :key="index">
				<view class="chapter u-flex">
					<text class="u-line-1">第{{item.chapterNo}}章  {{item.chapterName}}</text>
				</view>
				<view class="children" v-for="(item2,index2) in item.class" :key="index2" @click="children(item2)">
					<view class="title u-flex">
						<text>第{{item2.classNo}}节 {{item2.className}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 30rpx;"></view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				info:'',
				chapter:''
			}
		},
		methods: {
			getInfo(){
				this.$u.api.orderDetail({
					order_id:this.id
				}).then(res=>{
					this.info = res
					return this.$u.api.courseChapter({
						course_id:res.courseId
					})
				}).then(res=>{
					this.chapter = res
				})
			},
			children(item){
				// 小节点击
				item.type === 1 && this.$app.jump('/pages/course/video?id='+item.id)//视频
				item.type === 2 && this.$app.jump('/pages/course/audio?id='+item.id)//音频
				item.type === 3 && this.$app.jump('/pages/course/html?id='+item.id)//图文
			}
		},
		onLoad(o) {
			this.id = o.id
			this.getInfo()
		}
	}
</script>

<style lang="scss">
	page{background-color: #F2F2F2;}
	.goods-info{
		padding: 0 50rpx;margin-top: 20rpx;
		.item{
			background-color: #fff;border-radius: 20rpx;padding: 20rpx;margin-top: 20rpx;
			&:first-child{margin-top: 0;}
			.goods-img{width: 160rpx;height: 160rpx;border-radius: 20rpx;display: block;flex-shrink: 0;margin-right: 22rpx;}
			.title{font-weight: bold;font-size: 29rpx;line-height: 40rpx;height: 80rpx;}
			.sku{font-size: 26rpx;color: #555;padding-bottom: 10rpx;}
			.price{
				image{display: block;width: 36rpx;height: 36rpx;margin-right: 10rpx;flex-shrink: 0;}
				color: #F55332;font-size: 24rpx;font-weight: bold;
			}
		}
	}
	.order-info{
		background-color: #fff;border-radius: 20rpx;padding: 20rpx;margin: 20rpx 50rpx 0;
		.title{font-weight: bold;font-size: 30rpx;padding-bottom: 10rpx;}
		.line{color: #555;font-size: 28rpx;word-break: break-all;padding: 6rpx 0;
			justify-content: space-between;text-align: justify;
			.copy{color: $tc;white-space: nowrap;margin-left: 20rpx;}
		}
	}
	
	.co-list{
		margin: 20rpx 50rpx 0;background-color: #fff;border-radius: 20rpx;padding: 20rpx;
		.co-title{color: #DF7B5A;padding-bottom: 10rpx;font-weight: bold;font-size: 30rpx;}
		.item{
			.chapter{
				justify-content: space-between;height: 72rpx;
				text{font-size: 30rpx;font-weight: bold;}
				image{width: 30rpx;height: 34rpx;display: block;flex-shrink: 0;margin-right: 10rpx;}
			}
			.children{
				background-color: #f7f7f7;border-radius: 20rpx;position: relative;padding: 20rpx;margin-bottom: 20rpx;
				&:last-child{margin-bottom: 0;}
				image{display: block;width: 32rpx;height: 32rpx;flex-shrink: 0;}
				.free{color: $tc;font-size: 22rpx;padding-right: 14rpx;}
				.title{justify-content: space-between;}
				.time{font-size: 22rpx;color: #555;}
			}
		}
	}
</style>
